import React, { PureComponent } from 'react';
import {StyleSheet, Text, Animated, Dimensions, Image} from 'react-native';
import screen from '../../utils/screen';


export default class Toast extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            text: '',
            zIndex: new Animated.Value(-99),
            boxOpacity: new Animated.Value(0), // 透明度初始值
            title: ''
        };
        this._animateHandler = null;
    }

    componentWillUnmount() {
        if (this._animateHandler) {
            this._animateHandler.stop();
        }
    }

    showToast = text => {
        if (!text) {
            return;
        }
        this.setState({
            text
        });
        if (this._animateHandler) {
            this._animateHandler.stop();
            this._animateHandler = null;
            this.startAnimate();
        } else {
            this.startAnimate();
        }
    };


    hide(){
        if (this._animateHandler) {
            this._animateHandler.reset();
            this._animateHandler = null;
        }
    }

    showToastWithTitle = obj => {
        if (!obj) {
            return;
        }
        this.setState({
            text: obj.text,
            title: obj.title
        });
        if (this._animateHandler) {
            this._animateHandler.stop();
            this._animateHandler = null;
            this.startAnimate();
        } else {
            this.startAnimate();
        }
    };

    /**
     * 展示一秒后关闭 toast
     *
     */
    startAnimate = () => {
        this.state.zIndex.setValue(999);

        this._animateHandler = Animated.sequence([
            Animated.timing(this.state.boxOpacity, {
                toValue: 1,
                duration: 200,
                useNativeDriver:true
            }),
            Animated.delay(700), // 延迟执行
            Animated.timing(this.state.boxOpacity, {
                toValue: 0,
                duration: 200,
                useNativeDriver:true
            }),
            Animated.timing(this.state.zIndex, {
                toValue: -99,
                useNativeDriver:true
            })
        ]);

        this._animateHandler.start(({ finished }) => {
            if (finished) {
                this.setState({
                    text: '',
                    title: '',
                });
                if (this.props.onEnd) {
                    this.props.onEnd();
                }
            }
        }); // 开始执行动画;
    };

    render() {
        const { height } = Dimensions.get('window');

        return (
            <Animated.View
                style={[
                     styles.box,
                    {
                        zIndex: this.state.zIndex,
                        opacity: this.state.boxOpacity,
                        paddingHorizontal: this.state.title ? 10 : 0,
                        marginHorizontal: this.state.title ? 15 : 0
                    },
                    { top: height / 2 - 25 },
                    this.props.style
                ]}
            >
                {this.state.title ? <Text style={styles.title}>{this.state.title}</Text> : null}
                <Text
                    style={{
                        ...styles.text,
                        fontSize: this.state.title ? 15 : 12,
                        textAlign: this.state.title ? 'left' : 'center'
                    }}
                >
                    {this.state.text}
                </Text>
            </Animated.View>
        );
    }
}

const styles = StyleSheet.create({
    box: {
        position: 'absolute',
        paddingTop: 15,
        paddingLeft: 20,
        paddingRight: 20,
        paddingBottom: 15,
        alignSelf: 'center',
        backgroundColor: 'rgba(0,0,0,0.6)',
        borderRadius: 4
    },
    successBox: {
        position: 'absolute',
        width:screen.PIXEL_240, height:screen.PIXEL_240,
        justifyContent:'center',alignItems:'center',
        alignSelf: 'center',
        backgroundColor: 'rgba(0,0,0,0.6)',
        borderRadius: 4,
        zIndex: 9
    },
    centering: {
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: 10
    },
    text: {
        color: '#fff'
    },
    title: {
        fontSize: 15,
        textAlign: 'center',
        color: '#fff',
        marginBottom: 20
    }
});

/**
 * 用法

 toastRef.showToast('xxx');
 */
